<template>
  <view class="content">
    <view class="view_bg" style="margin-top: 0">
      <view class="list_items">
        <view class="blod_number" v-if="dataInfo.sourceCurrencyVo"
          >{{ dataInfo.sourceCurrencyVo.symbol
          }}{{ parseFloat(dataInfo.totalStock) }}</view
        >
        <view>{{ $t("sendId") }}：{{ dataInfo.userId }}</view>
      </view>
      <view class="list_items mt-20">
        <view>{{ dataInfo.createTime }}</view>
        <view>国家/地区：俄罗斯22</view>
      </view>
    </view>

    <view class="view_bg" style="margin-top: 30rpx">
      <view class="tips3">{{ $t("newDeal.offlineCollection") }}</view>
      <view class="flex_center">
        <view class="code_box" @longpress="onLongpress">
          <UQrcode :modules="modules"></UQrcode>
        </view>
        <view class="code_tips">{{ $t("order.detail-tips") }}</view>
      </view>
    </view>

    <view class="card">
      <image
        :src="
          dataInfo.avatar ? dataInfo.avatar : '/static/image/default-avatar.png'
        "
      />
      <view class="flex_right">
        <view>{{
          dataInfo.firstName ? dataInfo.firstName : dataInfo.lastName
        }}</view>
        <view class="time">{{ time() }}</view>
      </view>
    </view>

    <view class="view_bg" style="margin-top: 30rpx">
      <view class="tips2">{{ $t("newDeal.tips") }}</view>
      <view class="foot_btn">
        <view class="gray-button" @click="getCustomer(2)">{{
          $t("order.contact-administrator")
        }}</view>
        <view class="gray-button" @click="contactSellor">{{
          $t("order.contact-Sellor")
        }}</view>
      </view>
    </view>

    <view class="tip_content">
      <view v-if="topInfo">{{ $t("topTime") }}：{{ topInfo.endTime }}</view>
      <view v-else>{{ $t("noTop") }}</view>
      <view>
        <button class="btn btn2" size="mini" @click="showPrice = true">
          {{ $t("chat.Pin") }}
        </button>
      </view>
    </view>

    <view style="height: 200rpx"></view>
    <view class="fixed_foot">
      <button @click="onSendBook">发送确认书</button>
    </view>

    <u-popup
      :show="showPrice"
      mode="center"
      :safeAreaInsetBottom="false"
      :round="20"
    >
      <view class="zhi-show">
        <view class="show_price" style="margin-bottom: 30rpx"
          >{{ $t("payment") }} {{ topConfig.amount }}</view
        >
        <view class="show_price" style="margin-bottom: 60rpx"
          >{{ $t("pinnedDay", { value: topConfig.dayNum }) }}？</view
        >
        <view class="btn_list">
          <view class="list-qu" @click="showPrice = false">{{
            $t("index.Cancel")
          }}</view>
          <view class="xian"></view>
          <view class="list-que" @click="confirmTopping">{{
            $t("dating.sure")
          }}</view>
        </view>
      </view>
    </u-popup>

    <u-popup
      :show="show"
      @close="show = false"
      mode="bottom"
      round="25"
      :closeOnClickOverlay="false"
    >
      <view class="distinguish">
        <view @click="showQrCode" class="line"
          ><text class="iconfont icon-QRcode"></text
          >{{ $t("order.Identify-QR-code") }}
        </view>
        <view @click="show = false" class="line gray no-border">{{
          $t("index.Cancel")
        }}</view>
      </view>
    </u-popup>

    <u-popup
      :show="showCode"
      mode="center"
      round="25"
      :closeable="true"
      @close="showCode = false"
    >
      <view class="receipt-box">
        <view class="title">{{ $t("order.Receipt-Account") }}</view>
        <view class="receipt-info">{{ paymentInfo.content }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import UQrcode from "@/pagesUser/bourse/components/UQrcode.vue";
import UQRCode from "@/utils/uqrcode.js";
import {
  exchange,
  getTopConfigQuery,
  topInfo,
  getTopInfoList,
} from "@/services/new_api";
import { getTimeDiff } from "@/utils/index";
import { getOderAddress } from "@/services/bourse";

export default {
  components: {
    UQrcode,
  },
  data() {
    return {
      modules: [],
      show: false,
      id: null,
      dataInfo: {},
      showCode: false, //二维码内容
      paymentInfo: {}, //收款信息
      showPrice: false,
      topConfig: {},
      topInfo: null,
    };
  },
  onReady() {},
  async onLoad(e) {
    if (e.id) {
      this.id = e.id;
    }
    this.getExchange();
    this.getTopConfigQuery();
  },
  methods: {
    // 获取我的置顶信息
    async getTopInfoList() {
      const res = await getTopInfoList(this.dataInfo.tradeAddressId);
      this.topInfo = res.result.data;
    },

    async getTopConfigQuery() {
      const res = await getTopConfigQuery("exchange");
      if (res.result.code == 200) {
        this.topConfig = res.result.data || {};
      }
    },

    // 收款信息
    async getPaymentAddress() {
      const resp = await getOderAddress(this.dataInfo.tradeAddressId);
      if (!resp.success) return;
      this.paymentInfo = resp.result.data;
      setTimeout(() => {
        this.initCode();
      });
    },

    // 二维码弹框内容
    showQrCode() {
      this.show = false;
      this.showCode = true;
    },

    time() {
      return getTimeDiff(this.dataInfo.lastLoginTime, "minutes", true);
    },

    async getExchange() {
      const res = await exchange(this.id);
      if (res.result.code == 200) {
        this.dataInfo = res.result.data;
        this.getPaymentAddress();
        this.getTopInfoList();
      }
    },

    async sendMessage(conversation, message, options) {
      console.log(conversation, message, options);
      // 发送消息
      const res = await this.$RongIMLib.sendMessage(
        conversation,
        message,
        options
      );
      this.$store.dispatch("upChatList", res.data);
    },

    contactSellor() {
      const PersonMessage = this.$RongIMLib.registerMessageType(
        "s:exchangeCard",
        true,
        true,
        [],
        false
      );

      // 配置属性
      const options = {
        messageId: new Date().getTime(),
      };

      // 定义消息投送目标会话
      const conversation = {
        conversationType: this.$RongIMLib.ConversationType.PRIVATE,
        targetId: "1717814849834262530",
      };

      const message = new PersonMessage({ start: 123, end: 456 });

      this.sendMessage(conversation, message, options);
    },

    // 发送确认书
    onSendBook() {
      const obj = {
        tradeDetai1Id: this.dataInfo.tradeAddressId,
        tradeId: this.dataInfo.tradeId,
      };
      uni.navigateTo({
        url: `/pagesUser/confirmation_form/confirmation_form?fromData=${JSON.stringify(obj)}`,
      });
      console.log(obj);
    },

    // 确定置顶
    async confirmTopping() {
      if (!this.topConfig.id) {
        return;
      }
      const res = await topInfo({
        moduleType: "meet",
        topId: this.dataInfo.tradeAddressId,
        topConfigId: this.topConfig.id,
      });
      this.showPrice = false;
      if (res.code == 200) {
        uni.showToast({
          title: this.$t("index.operation-success"),
          icon: "none",
        });
      }
    },
    onLongpress() {
      this.show = true;
    },
    initCode() {
      // UQrcode相关
      // 获取uQRCode实例
      const qr = new UQRCode();
      // 设置uQRCode属性
      qr.data = this.paymentInfo.content; //// 指定二维码对应内容
      // qr.setOptions({
      //   data: 'https://uqrcode.cn/doc', // 指定二维码对应内容
      //   size: 100, // 指定要生成的二维码大小
      //   margin: 10 // 指定二维码的边距
      // });
      qr.size = 130; // 指定要生成的二维码大小
      // qr.margin = 10; // 指定二维码的边距
      qr.make();
      this.modules = qr.modules;
    },
  },
};
</script>

<style lang="scss" scoped>
.receipt-box {
  width: 550rpx;
  padding: 50rpx;

  .title {
    font-size: 36rpx;
    font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
    font-weight: 500;
    color: #000000;
    line-height: 52rpx;
  }

  .receipt-info {
    font-size: 28rpx;
    font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
    font-weight: 400;
    color: #878787;
    line-height: 40rpx;
    margin-top: 40rpx;
  }
}
.distinguish {
  padding: 30rpx 30rpx calc(constant(safe-area-inset-bottom) + 30rpx);
  padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 30rpx);

  .line {
    height: 100rpx;
    line-height: 100rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
    text-align: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 500;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-QRcode {
      margin-right: 20rpx;
      font-size: 18px;
      color: #000000;
    }

    &.no-border {
      border-bottom: none;
    }

    &.gray {
      color: #878787;
    }
  }
}
.fixed_foot {
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: 60rpx;
  button {
    background-color: transparent;
    color: #61bdb2;
    font-size: 30rpx;
    &::after {
      border-radius: 999rpx;
      border: 1rpx solid #61bdb2;
    }
  }
}

.zhi-show {
  overflow: hidden;
  width: 558rpx;
  height: 280rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding-top: 60rpx;
  .show_price {
    text-align: center;
    color: #000000;
    font-size: 30rpx;
    font-weight: bold;
  }
  .btn_list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1rpx solid #e7e7e7;
    height: 100rpx;
    position: relative;
    .list-qu {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    .xian {
      width: 2rpx;
      height: 100rpx;
      background: #e7e7e7;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .list-que {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #222222;
    }
  }
}
.tip_content {
  margin: 30rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn2 {
  border-radius: 6rpx !important;
  padding: 0 18rpx !important;
  background-color: #61bdb2;
  color: #fff;
}
.card {
  background-color: #fff;
  margin-top: 30rpx;
  padding: 25rpx 30rpx;
  display: flex;
  align-items: center;
  image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }
  .flex_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 30rpx;
    font-size: 28rpx;
    color: #333;

    .time {
      font-size: 26rpx;
      color: #888;
    }
  }
}
.code_box {
  margin-top: 10rpx;
  background-color: #333;
}
.code_tips {
  color: #888;
  font-size: 24rpx;
  margin-top: 20rpx;
}
.flex_center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tips3 {
  font-size: 28rpx;
  color: #333;
}
.foot_btn {
  margin-top: 40rpx;
  display: flex;
  justify-content: flex-end;
}
.gray-button {
  display: inline-block;
  border-radius: 80rpx;
  opacity: 1;
  border: 2rpx solid rgba(135, 135, 135, 0.6);
  font-size: 28rpx;
  font-weight: 500;
  color: #878787;
  text-align: center;
  padding: 20rpx;
  margin-left: 20rpx;
}
.tips2 {
  font-size: 26rpx;
  color: #888;
}
.mt-20 {
  margin-top: 20rpx;
}
.list_items {
  color: #6c6c6c;
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arrowhead {
  margin: 0 10rpx;
}
.tit {
  color: #888;
  font-size: 24rpx;
}
.ml-10 {
  margin-left: 10rpx;
}
.blod_number {
  font-size: 32rpx;
  color: #fd751c;
}
.middle {
  vertical-align: middle;
}
.content {
  padding: 20rpx 0 0;
  .view_bg {
    margin: 0 30rpx;
    border-radius: 16rpx;
    padding: 20rpx 30rpx;
    background-color: #fff;
    margin-top: 20rpx;
  }
  .to_be_redeemed {
    font-size: 32rpx;
    color: #61bdb2;
    font-weight: bold;
  }
  .ml {
    margin-left: 30rpx;
  }
  .tip_text {
    color: #888;
    font-size: 24rpx;
    margin-top: 10rpx;
    .blod_time {
      font-size: 32rpx;
      color: #fd751c;
      margin-left: 6rpx;
    }
  }
}
</style>
